<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标滚动时置顶的搜索框特效</title>
  <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>

<body>
<div class="wrap" id="wrap" >
  <div class="search">
    <input type="search" style="padding-left: 15px" placeholder="请输入搜索内容" /><span class="im"><img src="images/w.png"/></span>
  </div>
  <div class="top">
    <div class="hero"></div>
  </div>
  <main>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>


  </main>
</div>

<script type="text/javascript" src='js/jquery.min.js'></script>
<!--<script type="text/javascript" src="js/index.js"></script>-->
<script type="text/javascript">
  $(function(){

      $(window).on("scroll", function(e) {
          //alert('4q');
          var height = $(this).scrollTop();
          if(height > 50){
              //alert(4);
              $("#wrap").addClass("fix-search");
              $('.im').addClass('sear');

          } else {
              $("#wrap").removeClass("fix-search");
              $('.im').removeClass('sear');
          }

      });
  })


   /* var wrap = $("#wrap");
    wrap.on("scroll", function(e) {
        if (this.scrollTop > 47) {
            wrap.addClass("fix-search");
            $('.im').addClass('sear');

        } else {
            wrap.removeClass("fix-search");
            $('.im').removeClass('sear');
        }
    });*/
</script>
</body>
</html>